<template>
	<view>
		<view class="bottomHL"></view>
		<view class="bottom box">
			<block v-for="(item, index) of pageList" :key="index">
				<template v-if="page_path == item.url">
					<view class="bottom_content on">
						<image :src='item.iconHL' class='bottom_img'></image>
						<view class='bottom_wenzi'>{{item.name}}</view>
					</view>
				</template>
				<template v-else>
					<navigator :url='item.url' class="bottom_content" open-type='reLaunch'>
						<image :src='item.icon' class='bottom_img'></image>
						<view class='bottom_wenzi'>{{item.name}}</view>
					</navigator>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList: [{
					name: '首页',
					url: '/pages/home/index',
					icon: '/static/images/icon_home.png',
					iconHL: '/static/images/icon_homeHL.png'
				}, 
				// {
				// 	name: '看一看',
				// 	url: '/pages/forum/list',
				// 	icon: '/static/images/icon_look.png',
				// 	iconHL: '/static/images/icon_lookHL.png'
				// }, 
				{
					name: '我的',
					url: '/pages/mine',
					icon: '/static/images/icon_coupon.png',
					iconHL: '/static/images/icon_couponHL.png'
				}],
				lookToggle: true
			}
		},
		props: [
			"page_path"
		]
	}
</script>

<style lang="scss">
	.bottomHL {
		font-size: 0px;
		line-height: 999rpx;
		overflow: hidden;
		height: 100rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 100;
		background: #fff;
		/* border-top: 0.5rpx solid lightgray; */
	}

	.bottom_content {
		width: 100%;
		display: inline-block;
		text-align: center;
		/* border-left: 1px solid lightgray; */
		/* border-top: 1px solid lightgray; */
		height: 100rpx;
	}

	.bottomindex_img {
		width: 50%;
		height: 18px;
		margin-top: 15px;
	}

	.bottom_img {
		margin-top: 6rpx;
		width: 48rpx;
		height: 48rpx;
		padding: 4rpx 0;
		/*display: inline-block;
  margin: 20px 5px 0px 10px;*/
	}

	.bottom_wenzi {
		line-height: 1;
		font-size: 20rpx;
		font-weight: 500;
		color: #999;
	}

	.bottom_content.on .bottom_wenzi {
		color: #1a1a1a;
	}
</style>
